<template>
    <div style="width: 100px; margin: 0 auto" ref="currentDiv" @click="showDrawer()">
        <div class="startClass" ref="childRef" style="text-align: center; font-weight: bold; line-height: 30px">
            <span class="spanClass">开始</span>
        </div>
    </div>
    <div style="height: 30px"></div>


    <component v-if="jsonInfo.next !== null && jsonInfo.next" :is="jsonInfo.next['type']" :jsonInfo="jsonInfo.next" ref="commonChildRef"
               :beforeNode="jsonInfo" :beforeNodeStartX="realBottomX" :beforeNodeStartY="realBottomY" :globalJson="globalJson" :flowDetailJson="flowDetailJson"></component>

    <el-drawer v-model="drawerFlag" :with-header="false" :close-on-click-modal="false" :lock-scroll="true">
        <YwuStartNodeDrawer :properties="jsonInfo.properties"/>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelUpdate()">取消</el-button>
                <el-button type="primary" @click="confirmUpdate()">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script name="YwuStartNode" setup>
import YwuStartNodeDrawer from "@/views/bpmn/flow/drawer/YwuStartNodeDrawer.vue";
import emitter from "@/utils/mitt";
import {computed, onMounted, ref, nextTick, onBeforeUnmount} from "vue";

let props = defineProps(["jsonInfo", "globalJson", "flowDetailJson"]);

let jsonInfo = computed(() => {return props["jsonInfo"]});
let globalJson = computed(() => {return props["globalJson"]});
let flowDetailJson = computed(() => {return props["flowDetailJson"]});

let commonChildRef = ref(null);

let currentTopX = ref(0);
let currentTopY = ref(0);
let currentBottomX = ref(0);
let currentBottomY = ref(0);
let realBottomX = ref(0);
let realBottomY = ref(0);
let drawerFlag = ref(false);
let propertiesCopy = ref({});

onMounted(() => {
    nextTick(() => {
        calcXy();
    });
    // 在组件挂载时添加窗口大小改变的监听器
    window.addEventListener('resize', calcXy);
    emitter.on('refreshLine', (message) => {
        nextTick(() => {
            calcXy();
        });
    });
})

onBeforeUnmount(() => {
    // 在组件销毁前移除监听器，避免内存泄漏
    window.removeEventListener('resize', calcXy);
})

let currentDiv = ref(null);
function calcXy() {
    let nodeInfo = currentDiv.value;
    currentTopX.value = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
    currentBottomX.value = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
    currentTopY.value = nodeInfo.offsetTop - 10;
    currentBottomY.value = nodeInfo.offsetTop + nodeInfo.offsetHeight;
    realBottomX.value = currentBottomX.value;
    realBottomY.value = currentBottomY.value;
}

function showDrawer() {
    // 备份数据
    propertiesCopy.value = {...jsonInfo.value.properties}
    drawerFlag.value = true
}

function confirmUpdate() {
    drawerFlag.value = false;
}

function cancelUpdate() {
    drawerFlag.value = false;
    // 还原数据
    jsonInfo.value.properties = {...propertiesCopy.value};
}

defineExpose({
    jsonInfo, calcXy, commonChildRef, realBottomX, realBottomY
})
</script>

<style scoped lang="less">
.startClass {
    width: 100px;
    height: 30px;
    border-radius: 10px;
    background-color: rgba(98, 245, 233, 0.43);
}

.startClass:hover {
    cursor: pointer;
}
</style>